
* {
    margin: 0;
    padding: 0;
}
html {
    background:url(/wapi/img/mobile/lover/bg.jpg) no-repeat top center #100a33;line-height:30px;
    font-family: Microsoft YaHei, Simsun;
}

body{
    width:96%; margin:0 auto; max-width:640px; padding:0 2% 0;}


a{color:#333; text-decoration:none;}
ol, ul, li {
    list-style: none;
    padding:0;
    margin:0;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
:focus {
    outline: 0;
}
.fl{
    float:left;}

.fr{
    float:right;}

.hidden {
    display: none;
    visibility: hidden;
}
/**/

@media (min-width:980px){
    html{font-size:13pt;}
    .content .join,.content .join_right{ width:90%; position:relative; margin:40px auto 0;}
    .content .join a{color:#ffae00; position:absolute; top:55px; padding-left:20%; font-weight:bold;font-size:20pt;}
    .content .join_right a{color:#ffae00; position:absolute; top:55px; padding-left:55%; font-weight:bold; font-size:20pt;}
    .content .title{margin:0 10%; width:80%;}
    .four .join_left a{color:#ffae00; position:absolute; top:45px; padding-left:22%; font-weight:bold;font-size:20pt;}
    .four .join_right a{color:#ffae00; position:absolute; top:45px;padding-left:58%;font-weight:bold;font-size:20pt;}
    .content .join img,.content .join_right img{width:70%; margin-left:10%;}
    .content .result p{text-align:center; font-size:20pt; color:#ffae00; line-height:42pt;}
    .content .result p b{display:block;font-size:25pt;}

}

@media (min-width:768px) and (max-width: 979px){
    html{font-size:13pt;}
    .content .join,.content .join_right{ width:90%; position:relative; margin:30px auto 0;}
    .content .join a{color:#ffae00; position:absolute; top:50px; padding-left:20%; font-weight:bold;font-size:18pt;}
    .content .join_right a{color:#ffae00; position:absolute; top:50px; padding-left:55%; font-weight:bold;font-size:18pt;}
    .content .title{margin:0 10%; width:80%;}
    .four .join_left a{color:#ffae00; position:absolute; top:37px; padding-left:20%; font-weight:bold;font-size:18pt;}
    .four .join_right a{color:#ffae00; position:absolute; top:37px;padding-left:58%;font-weight:bold;font-size:18pt;}
    .content .join img,.content .join_right img{width:70%; margin-left:10%;}
    .content .result p{text-align:center; font-size:18pt; color:#ffae00;line-height:38pt;}
    .content .result p b{display:block;font-size:25pt;}
}

@media (min-width:433px) and (max-width: 767px) {
    html{font-size:13pt;}
    .content .join,.content .join_right{ width:90%; position:relative; margin:20px auto 0;}
    .content .join a{color:#ffae00; position:absolute; top:45px; padding-left:18%; font-weight:bold;font-size:15pt;}
    .content .join_right a{color:#ffae00; position:absolute; top:45px; padding-left:55%; font-weight:bold; font-size:15pt;}
    .content .title{margin:0 10%; width:80%;}
    .four .join_left a{color:#ffae00; position:absolute;top:25px; padding-left:18%; font-weight:bold;font-size:15pt;}
    .four .join_right a{color:#ffae00; position:absolute; top:25px;padding-left:58%;font-weight:bold;font-size:15pt;}
    .content .join img,.content .join_right img{width:70%; margin-left:10%;}
    .content .result p{text-align:center; font-size:19pt; color:#ffae00;line-height:30pt;}
    .content .result p b{display:block;font-size:22pt;}
}

@media (min-width:400px) and (max-width: 432px) {
    html{font-size:12pt;}
    .content .join,.content .join_right{ width:90%; position:relative; margin:15px auto 0;}
    .content .join a{color:#ffae00; position:absolute; top:28px; padding-left:17%; font-weight:bold;font-size:14pt;}
    .content .join_right a{color:#ffae00; position:absolute; top:28px; padding-left:55%; font-weight:bold;font-size:14pt;}
    .content .title{margin:0 10%; width:70%;}
    .four .join_left a{color:#ffae00; position:absolute;top:18px; padding-left:17%; font-weight:bold;font-size:14pt;}
    .four .join_right a{color:#ffae00; position:absolute; top:18px;padding-left:58%;font-weight:bold;font-size:14pt;}
    .content .join img,.content .join_right img{width:80%; margin-left:10%;}
    .content .result p{text-align:center; font-size:18pt; color:#ffae00;line-height:25pt;}
    .content .result p b{display:block;font-size:23pt;}
}

@media (min-width:320px) and (max-width: 399px) {
    html{font-size:10pt;}
    .content .join,.content .join_right{ width:90%; position:relative; margin:15px auto 0;}
    .content .join a{color:#ffae00; position:absolute; top:19px; padding-left:18%; font-weight:bold;font-size:13pt;}
    .content .join_right a{color:#ffae00; position:absolute; top:19px; padding-left:58%; font-weight:bold;font-size:13pt;}
    .content .title{margin:0 5%; width:90%;}
    .four .join_left a{color:#ffae00; position:absolute; top:10px; padding-left:18%;font-weight:bold;font-size:13pt;}
    .four .join_right a{color:#ffae00; position:absolute; top:10px;padding-left:58%;font-weight:bold;font-size:13pt;}
    .content .join img,.content .join_right img{width:80%; margin-left:10%;}
    .content .result p{text-align:center; font-size:13pt; color:#ffae00;}
    .content .result p b{display:block;font-size:18pt;}

}




.content .top{
    width:100%;}
.content p{
    color:#ccc; }


.content .share{
    width:100%;}

.content .result{
    width:100%; margin-top:15px;}

.content .result img{
    width:40%; overflow:hidden; margin:0 auto 10px; display:block;}



.content .describe{
    width:90%;  margin:0 auto; color:#fff;bottom: 0;left:10%; position: fixed;}

.content .describe a{
    color:#ffae00;}

.four .join_left{
    position:relative;}

.four .join_left,.four .join_right{
    width:49%; margin:0 0 10px;}

.four .join_left img,.four .join_right img{
    width:90%; margin:0;}

.four .join_left{
    float:left;}
.four .join_right{
    float:right;}
	
